@import "../_variables";

// TODO: translateX(-260px) or translateY(-260px) need to be nav size
// this need to be handle by JS or CSS Variable

// Nav Overlay
.effeckt-off-screen-nav {
  ~ [data-effeckt-page].effeckt-page-active:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: $effeckt-off-screen-navigation-transition-duration;
  }

  &.effeckt-show {
    ~ [data-effeckt-page].effeckt-page-active:after {
      opacity: 1;
      visibility: visible;
    }
  }
}

// 1 Left Overlay
.effeckt-off-screen-nav-left-overlay {
  transform: translateX(-100%);
  transition: $effeckt-off-screen-navigation-transition-duration cubic-bezier(.09,.68,0,.99);

  &.effeckt-show {
    transform: translateX(0);
  }
}


// 2 Left Push
.effeckt-off-screen-nav-left-push {
  // Needs to be fixed size so .page-wrap can move same distance
  transform: translateX(-12rem);
  transition: $effeckt-off-screen-navigation-transition-duration;

  &.effeckt-show {
    transform: translateX(0);
    ~ [data-effeckt-page].effeckt-page-active {
      transform: translateX(12rem);
    }
  }

  ~ [data-effeckt-page].effeckt-page-active {
    transition: $effeckt-off-screen-navigation-transition-duration;
    transform: translateX(0);
  }
}


// 3 Left Reveal
.effeckt-off-screen-nav-left-reveal {
  // Needs to be fixed size so .page-wrap can move same distance
  width: 0px;
  transform: translate3D(0, 0, 0);
  transition: $effeckt-off-screen-navigation-transition-duration;
  & h4 {
    width: 10rem;
  }
  &.effeckt-show {
    width: 12rem;
    transform: translateX(0);
    ~ [data-effeckt-page] {
      transform: translateX(12rem);
    }
  }
  ~ [data-effeckt-page] {
    transition: $effeckt-off-screen-navigation-transition-duration;
  }
}

// 4 Left Squeeze
.effeckt-off-screen-nav-left-squeeze {
  // Needs to be percentage so can be equal parts with .page-wrap
  width: 40%;
  transform: translateX(-100%);
  transition: $effeckt-off-screen-navigation-transition-duration;
  &.effeckt-show {
    transform: translateX(0);
    ~ [data-effeckt-page] {
      width: 60%;
    }
  }
  ~ [data-effeckt-page] {
    float: right;
    transition: width $effeckt-off-screen-navigation-transition-duration;
    max-width: none; // reset from demo
  }
}

// 5 Right Overlay
.effeckt-off-screen-nav-right-overlay {
  right: 0;
  left: auto;
  transform: translateX(100%);
  transition: $effeckt-off-screen-navigation-transition-duration cubic-bezier(.09, .68, 0, .99);
  &.effeckt-show {
    transform: translateX(0);
  }
}


// 6 Right Push
.effeckt-off-screen-nav-right-push {
  // Needs to be fixed size so .page-wrap can move same distance
  left: auto;
  right: 0;
  transform: translateX(12rem);
  transition: $effeckt-off-screen-navigation-transition-duration;
  &.effeckt-show {
    transform: translateX(0);
    ~ [data-effeckt-page] {
      transform: translateX(-12rem);
    }
  }
  ~ [data-effeckt-page] {
    transition: $effeckt-off-screen-navigation-transition-duration;
  }
}

// 7 Right Reveal
.effeckt-off-screen-nav-right-reveal {
  // Needs to be fixed size so .page-wrap can move same distance
  width: 0;
  overflow: hidden;
  left: auto;
  right: 0;
  transform: translate3D(0, 0, 0);
  transition: $effeckt-off-screen-navigation-transition-duration;
  & h4 {
    width: 10rem;
    position: absolute;
    top: 0px;
    right: 0;
  }
  & ul {
    width: 12rem;
    position: absolute;
    top: 3.2rem;
    right: 0;
  }
  &.effeckt-show {
    width: 12rem;
    ~ [data-effeckt-page] {
      transform: translateX(-12rem);
    }
  }
  ~ [data-effeckt-page] {
    transition: $effeckt-off-screen-navigation-transition-duration;
  }
}

// 8 Right Squeeze
.effeckt-off-screen-nav-right-squeeze {
  // Needs to be percentage so can be equal parts with .page-wrap
  left: auto;
  right: 0;
  width: 40%;
  transform: translateX(100%);
  transition: $effeckt-off-screen-navigation-transition-duration;
  &.effeckt-show {
    transform: translateX(0);

    ~ [data-effeckt-page] {
      width: 60%;
    }
  }
  ~ [data-effeckt-page] {
    float: left;
    transition: width $effeckt-off-screen-navigation-transition-duration;
    max-width: none; // reset from demo
  }
}

// 9 Rotate from Left
.effeckt-off-screen-nav-left-rotate {
  transform-origin: 100% 50%;
  transition: $effeckt-off-screen-navigation-transition-duration;
  transform: translateX(-100%) scale(1.01) rotateY(-30deg);

  ~ [data-effeckt-page].effeckt-page-active {
    transform-origin: 0 50%;
    transition: $effeckt-off-screen-navigation-transition-duration;
  }

  ~ .effeckt-overlay {
    z-index:900;
    visibility: visible;
    opacity: 1;
  }

  &.effeckt-show {
    transform: none;

    ~ [data-effeckt-page].effeckt-page-active {
      transform: translateX(260px) rotateY(15deg);

      // Prevent scrolling
      overflow: hidden;

      &:after {
        background: none;
      }
    }

    // dont nest > 3 levels deep
    ~ [data-effeckt-page] .off-screen-nav-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

  }
}

// 10 Top Overlay
.effeckt-off-screen-nav-top-overlay {
  width: 100%;
  bottom:auto;
  transition: $effeckt-off-screen-navigation-transition-duration;
  transform: translateY(-100%);

  &.effeckt-show {
    visibility: visible;
    transform: translateY(0%);
  }
}

// 11 Bottom Overlay
.effeckt-off-screen-nav-bottom-overlay {
  width: 100%;
  top:auto;
  transition: $effeckt-off-screen-navigation-transition-duration;
  transform: translateY(100%);

  &.effeckt-show {
    transform: translateY(0%);
  }
}

// 12.1 Top Bounce
.effeckt-off-screen-nav-top-bounce {
  width: 100%;
  bottom:auto;
  transition: $effeckt-off-screen-navigation-transition-duration;

  &.effeckt-show {
    visibility: visible;
    animation: navFromTopBounceIn $effeckt-off-screen-navigation-transition-duration both ease;
  }

  &.effeckt-hide {
    animation: navFromTopBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
  }
}

// 12.2 Top Bounce Out Only
.effeckt-off-screen-nav-top-bounce-out {
  width: 100%;
  bottom:auto;
  transform: translateY(-100%);
  transition: $effeckt-off-screen-navigation-transition-duration;

  &.effeckt-show {
    visibility: visible;
    transform: translateY(0%);
  }

  &.effeckt-hide {
    animation: navFromTopBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
  }
}

@keyframes navFromTopBounceIn {
  0% { transform: translateY(-100%); }
  20% { padding-top: 0px; transform: translateY(0%); }
  60% { padding-top: 20px; }
  100% { padding-top: 0; }
}
@keyframes navFromTopBounceOut {
  0% { transform: translateY(0%); padding-top: 0px; }
  40%{ transform: translateY(0%); padding-top: 20px; }
  80%{ padding-top: 0px; }
  90%, 100%{ transform: translateY(-100%); }
}

// 13.1 Bottom Bounce
.effeckt-off-screen-nav-bottom-bounce {
  width: 100%;
  top:auto;
  transition: $effeckt-off-screen-navigation-transition-duration;

  &.effeckt-show {
    animation: navFromBottomBounceIn $effeckt-off-screen-navigation-transition-duration both ease;
  }
  &.effeckt-hide {
    animation: navFromBottomBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
  }
}

// 13.2 Bottom Bounce Out Only
.effeckt-off-screen-nav-bottom-bounce-out {
  width: 100%;
  top:auto;
  transform: translateY(100%);
  transition: $effeckt-off-screen-navigation-transition-duration;

  &.effeckt-show {
    transform: translateY(0%);
  }
  &.effeckt-hide {
    animation: navFromBottomBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
  }
}

@keyframes navFromBottomBounceIn {
  0% { transform: translateY(100%); }
  20% { padding-bottom: 0px; transform: translateY(0%); }
  60% { padding-bottom: 20px; }
  100% { padding-bottom: 0; }
}
@keyframes navFromBottomBounceOut {
  0% { transform: translateY(0%); padding-bottom: 0px; }
  40%{ transform: translateY(0%); padding-bottom: 20px; }
  80%{ padding-bottom: 0; }
  90%, 100%{ transform: translateY(100%); }
}

// 14 Push Top
.effeckt-off-screen-nav-push-top {
  width: 100%;
  bottom:auto;
  transition: $effeckt-off-screen-navigation-transition-duration;
  transform: translateY(-100%);

  &.effeckt-show {
    visibility: visible;
    transform: translateY(0%);

    ~ [data-effeckt-page] {
      transform: translateY(12rem);
    }
  }

  ~ [data-effeckt-page] {
    transition: $effeckt-off-screen-navigation-transition-duration;
  }
}


// 15 Push Bottom
.effeckt-off-screen-nav-push-bottom {
  width: 100%;
  top:auto;
  transition: $effeckt-off-screen-navigation-transition-duration;
  transform: translateY(100%);

  &.effeckt-show {
    visibility: visible;
    transform: translateY(0%);

    ~ [data-effeckt-page] {
      transform: translateY(-12rem);
    }
  }

  ~ [data-effeckt-page] {
    transition: $effeckt-off-screen-navigation-transition-duration;
  }
}

// 16 Rotate from Right
.effeckt-off-screen-nav-right-rotate {
  left: auto;
  right: 0;
  transform-origin: 100% 50%;
  transition: $effeckt-off-screen-navigation-transition-duration;
  transform: rotateY(30deg) translateX(100%) scale(1.01);

  ~ [data-effeckt-page] {
    transform-origin: 100% 50%;
    transition: $effeckt-off-screen-navigation-transition-duration;
  }

  ~ .effeckt-overlay {
    z-index:900;
    visibility: visible;
    opacity: 1;
  }

  &.effeckt-show {
    transform: none;

    ~ [data-effeckt-page] {
      transform: translateX(-260px) rotateY(-15deg);

      // Prevent scrolling
      overflow: hidden;

      &:after {
        background: none;
      }
    }

    // dont nest > 3 levels deep
    ~ [data-effeckt-page] .off-screen-nav-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

  }
}


// 17 Card Deck From Top
.effeckt-off-screen-nav-top-card-deck {
  perspective: 800px;
  bottom: auto;
  transform: translateY(-100%);
  width: 100%;
  overflow:visible;
  transition: transform $effeckt-off-screen-navigation-transition-duration/2;

  &.effeckt-show {
    transform: translateY(0%);
  }

  h4 {
    position: relative;
    z-index: 300;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 50% 0%;
    transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;
    display:block;

    &:active {
      transform: rotateX(60deg);
    }
  }

  ul {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin:0;

    li {
      transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;
      position: absolute;
      top: 0;
      z-index: 0;
      width:100%;
      height:100%;

      transform: translateY(0px);
    }
  }
}

// 18 Card Deck From Bottom
.effeckt-off-screen-nav-bottom-card-deck {
  perspective: 800px;
  top: auto;
  transform: translateY(100%);
  width: 100%;
  overflow:visible;
  transition: transform $effeckt-off-screen-navigation-transition-duration/2;

  &.effeckt-show {
    transform: translateY(0%);
  }

  h4 {
    position: relative;
    z-index: 300;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;
    display:block;

    &:active {
      transform: rotateX(-60deg);
    }
  }

  ul {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    margin:0;

    li {
      transition: all $effeckt-off-screen-navigation-transition-duration/2 ease-out;
      position: absolute;
      top: 0;
      z-index: 0;
      width:100%;
      height:100%;

      transform: translateY(300px);
    }
  }
}

// 19.1 Left Bounce
.effeckt-off-screen-nav-left-bounce {
  transition: $effeckt-off-screen-navigation-transition-duration;
  transform: translateX(-100%);

  &.effeckt-show {
    visibility: visible;
    transform: translateX(0%);
    animation: navFromLeftBounceIn $effeckt-off-screen-navigation-transition-duration both ease;
  }

  &.effeckt-hide {
    transform: translateX(-100%);
    animation: navFromLeftBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
  }
}

@keyframes navFromLeftBounceIn {
  0% { transform: translateX(-100%); }
  20% { padding-left: 0px; transform: translateX(0%); }
  60% { padding-left: 20px; }
  100% { padding-left: 0px; }
}
@keyframes navFromLeftBounceOut {
  0% { transform: translateX(0%); padding-left: 0px; }
  40%{ transform: translateX(0%); padding-left: 20px; }
  80%{ padding-left: 0px; }
  90%, 100%{ transform: translateX(-100%); }
}

// 19.2 Left Bounce Out Only
.effeckt-off-screen-nav-left-bounce-out {
  transform: translateX(-100%);
  transition: $effeckt-off-screen-navigation-transition-duration;

  &.effeckt-show {
    visibility: visible;
    transform: translateY(0%);
  }

  &.effeckt-hide {
    animation: navFromLeftBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
  }
}

// 20.1 Right Bounce
.effeckt-off-screen-nav-right-bounce {
  left: auto;
  right: 0;
  transition: $effeckt-off-screen-navigation-transition-duration;

  &.effeckt-show {
    visibility: visible;
    animation: navFromRightBounceIn $effeckt-off-screen-navigation-transition-duration both ease;
  }

  &.effeckt-hide {
    animation: navFromRightBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
  }
}

@keyframes navFromRightBounceIn {
  0% { transform: translateX(100%); }
  20% { padding-right: 0px; transform: translateX(0%); }
  60% { padding-right: 20px; }
  100% { padding-right: 0px; }
}
@keyframes navFromRightBounceOut {
  0% { transform: translateX(0%); padding-right: 0px; }
  40%{ transform: translateX(0%); padding-right: 20px; }
  80%{ padding-right: 0px; }
  90%, 100%{ transform: translateX(100%); }
}

// 20.2 Left Bounce Out Only
.effeckt-off-screen-nav-right-bounce-out {
  left: auto;
  right: 0;
  transform: translateX(100%);
  transition: $effeckt-off-screen-navigation-transition-duration;

  &.effeckt-show {
    visibility: visible;
    transform: translateY(0%);
  }

  &.effeckt-hide {
    animation: navFromRightBounceOut $effeckt-off-screen-navigation-transition-duration both ease;
  }
}


// 21 Rotate from Bottom
.effeckt-off-screen-nav-bottom-rotate {
  top: auto;
  width: 100%;
  transform-origin: 100% 50%;
  transition: $effeckt-off-screen-navigation-transition-duration;
  transform: translateY(100%) scale(1.01) rotateX(-30deg);

  ~ [data-effeckt-page].effeckt-page-active {
    transform-origin: 0% 100%;
    transition: $effeckt-off-screen-navigation-transition-duration;
  }

  ~ .effeckt-overlay {
    z-index:900;
    visibility: visible;
    opacity: 1;
  }

  &.effeckt-show {
    transform: none;

    ~ [data-effeckt-page].effeckt-page-active {
      transform: translateY(-260px) rotateX(15deg);

      // Prevent scrolling
      overflow: hidden;

      &:after {
        background: none;
      }
    }

    // dont nest > 3 levels deep
    ~ [data-effeckt-page] .off-screen-nav-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

  }
}

// 22 Rotate from Top
.effeckt-off-screen-nav-top-rotate {
  bottom: auto;
  width: 100%;
  transform-origin: 50% 0%;
  transition: $effeckt-off-screen-navigation-transition-duration;
  transform: translateY(-100%) scale(1.01) rotateX(30deg);

  ~ [data-effeckt-page].effeckt-page-active {
    transform-origin: 100% 0%;
    transition: $effeckt-off-screen-navigation-transition-duration;
  }

  ~ .effeckt-overlay {
    z-index:900;
    visibility: visible;
    opacity: 1;
  }

  &.effeckt-show {
    transform: none;

    ~ [data-effeckt-page].effeckt-page-active {
      transform: translateY(260px) rotateX(-15deg);

      // Prevent scrolling
      overflow: hidden;

      &:after {
        background: none;
      }
    }

    // dont nest > 3 levels deep
    ~ [data-effeckt-page] .off-screen-nav-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

  }
}
// 23 Minimize then reveal
// based on left-reveal (2) and Rotate from Top (22)
@mixin minimize-reveal-list-items-hidden {
  li, h4 {
    transition: $effeckt-off-screen-navigation-transition-duration  cubic-bezier(.16,.86,.33,.97);
    transform: translateX(5%);
    opacity: 0;
  }
}

@mixin minimize-reveal-list-items-fade {
  transform: translateX(0);
  opacity: 1;
}

@mixin minimize-reveal-list-items-shown {
  h4 {
    @include minimize-reveal-list-items-fade();
    //fade in header first.
    transition-delay: $effeckt-off-screen-navigation-transition-duration;
  }
  @for $i from 1 through $effeckt-off-screen-navigation-list-item-amount {
    li:nth-child(#{$i}) {
      @include minimize-reveal-list-items-fade();
      //wait until the header has finished
      transition-delay: $effeckt-off-screen-navigation-transition-duration * 2 + $effeckt-off-screen-navigation-transition-duration * $i * 0.25;
    }
  }
}

.effeckt-off-screen-nav-minimize-reaveal {
  width: 100%;
  transition: $effeckt-off-screen-navigation-transition-duration;
  // padding-right: 35%;

  ~ [data-effeckt-page].effeckt-page-active {
    transition: $effeckt-off-screen-navigation-transition-duration;
    box-shadow: 0px 0px 50px #CACACA;
    z-index: 1000;
  }

  @include minimize-reveal-list-items-hidden();
  &.effeckt-show {
    @include minimize-reveal-list-items-shown();

    ~ [data-effeckt-page].effeckt-page-active {
      transition: $effeckt-off-screen-navigation-transition-duration * 1.5  cubic-bezier(.16,.86,.33,.97);
      transform: translateX(50%) scale3d(0.5,0.5,1);
      overflow: hidden;
    }

    // dont nest > 3 levels deep
    ~ [data-effeckt-page] .off-screen-nav-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

.effeckt-off-screen-nav-minimize-flip {
  width: 100%;
  transition: $effeckt-off-screen-navigation-transition-duration;
  // padding-right: 35%;

  ~ [data-effeckt-page].effeckt-page-active {
    transition: $effeckt-off-screen-navigation-transition-duration;
    box-shadow: 0px 0px 50px #CACACA;
    z-index: 1000;
  }

  @include minimize-reveal-list-items-hidden();
  &.effeckt-show {
    @include minimize-reveal-list-items-shown();

    ~ [data-effeckt-page].effeckt-page-active {
      transition: $effeckt-off-screen-navigation-transition-duration * 1.5  cubic-bezier(.16,.86,.33,.97);
      transform: translateX(50%) rotateY(-15deg) scale3d(0.5,0.5,1);
      overflow: hidden;
    }

    // dont nest > 3 levels deep
    ~ [data-effeckt-page] .off-screen-nav-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

  }
}
